<!-- 每一个小的tab -->
<template>
    <div class="tab-bar-item" @click="clickTranslate">
        <div v-if="!isActive"><slot name="item-icon"></slot></div>
        <div v-else><slot name="item-icon-active"></slot></div>
        <!-- <div :class="{active:isActive}"><slot name="item-text"></slot></div> -->
        <div :style="activeStyle"><slot name="item-text"></slot></div>
    </div>
</template>


<script>
export default {
    name:'TabBarItem',
    props: {
        path:String,
        activeColor:{
            type:String,
            default:'red',
        }
    },
    data(){
        return{
            // isActive:false,
            index :1
        }
    },
    computed: {
        //设计思想：由于$route指向当前活跃的路由，每个tab有个父组件传过来的path
        //如果$route中的path与tab的path值相等，说明当前的tab应该时激活状态
      isActive(){
          //和当前活跃组件path相匹配的返回true
          return this.$route.path.includes(this.path);
      },
      activeStyle(){
          return this.isActive ? {'color':this.activeColor} : {}
      }  
    },
    methods: {
        clickTranslate(){
            this.$router.replace(this.path).catch(err => {});
        }
    }
}
</script>


<style scoped>
    .tab-bar-item{
        flex: 1;
        text-align: center;
        height: 49px;
        font-size: 14px;
    }

    .tab-bar-item img{
        width: 24px;
        height: 24px;
        margin-top: 3px;
        vertical-align: middle;
        margin-bottom: 2px;
    }
    .active{
        color:red;
    }
</style>
